<template>
  <div>

    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-col :span="6">
            <el-input placeholder="请输入游乐名称" v-model="name"></el-input>
          </el-col>
          <el-col :span="6">
            <el-select v-model="tribeId" placeholder="请选择主办方">
              <el-option
                  v-for="item in tribeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-select v-model="typeId" placeholder="请选择活动类型">
              <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-button @click="paging(1)" type="primary" round icon="el-icon-search">查询</el-button>
          <el-button type="info" @click="clear">重置</el-button>
        </el-col>

        <el-col :span="8" align="right">
          <el-button @click="add()" type="success" icon="el-icon-plus" circle></el-button>
        </el-col>
      </el-row>

    </el-card>
  <el-table
        :data="page.list"
        style="width: 100%;margin-top: 20px;">
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
    <el-table-column
        prop="name"
        label="名称">
    </el-table-column>
     <el-table-column
          prop="upBeginTime"
          label="报名开始时间">
      </el-table-column>
       <el-table-column
          prop="upEndTime"
          label="报名结束时间">
      </el-table-column>
      <el-table-column
          prop="ingBeginTime"
          label="活动开始时间">
      </el-table-column>
      <el-table-column
          prop="ingEndTime"
          label="活动结束时间">
      </el-table-column>
    <el-table-column
        prop="ingEndTime"
        label="活动结束时间">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态"
        >
      <template slot-scope="scope">
        <el-tag type="danger" v-if="scope.row.status==0">待审核</el-tag>
        <el-tag type="success" v-if="scope.row.status==1">审核通过</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="apply"
        label="人员要求"
        >
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.apply==1">全部人员</el-tag>
        <el-tag type="success" v-if="scope.row.apply==2">部落人员</el-tag>
      </template>
    </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="照片"
          width="200">

        <template slot-scope="scope">
          <img :src="scope.row.photopath" width="100">

        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-link circle type="warning" icon="el-icon-edit" @click="update(scope.row)">修改</el-link>
          <el-link circle  type="danger" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="page.Num"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
    <el-dialog title="修改活动" v-if="dialogFormVisible1" :visible.sync="dialogFormVisible1" @close="reset">
      <el-form :model="form" ref="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name"  ></el-input>
        </el-form-item>
        <el-form-item label="详情" :label-width="formLabelWidth">
          <el-input v-model="form.detail"  ></el-input>
        </el-form-item>

        <el-form-item label="上传头像" :label-width="formLabelWidth">
          <el-upload
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleChange"
              :on-remove="handleRemove"
              multiple
              :limit="1"
              :show-file-list="true"
              list-type="picture-card"
              :file-list="fileList">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.typeId" >
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学分" :label-width="formLabelWidth">
          <el-input-number v-model="form.score" @change="handleChange1" :min="1" :max="10" label="数量"></el-input-number>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address"  ></el-input>
        </el-form-item>

        <el-form-item label="最大报名人数" :label-width="formLabelWidth">
          <el-input-number v-model="form.upMaxNum" @change="handleChange1" :min="1" :max="100" label="数量"></el-input-number>
        </el-form-item>
        <el-form-item label="主办部落" :label-width="formLabelWidth">
          <el-select v-model="form.tribeId" >
            <el-option
                v-for="item in tribeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="人员范围" :label-width="formLabelWidth">
          <el-select v-model="form.apply" >
            <el-option
                v-for="item in applyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="报名开始时间" :label-width="formLabelWidth">

          <el-date-picker
              v-model="form.upBeginTime"
              type="datetime"
              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="报名结束时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.upEndTime"
              type="datetime"
              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="活动开始时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.ingBeginTime"
              type="datetime"
              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="活动结束时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.ingEndTime"
              type="datetime"
              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>




      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="saveupdate">确 定</el-button>

      </div>
    </el-dialog>

        <el-dialog title="添加活动" v-if="dialogFormVisible" :visible.sync="dialogFormVisible" @close="reset">
          <el-form :model="form" ref="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="form.name"  ></el-input>
            </el-form-item>
            <el-form-item label="详情" :label-width="formLabelWidth">
              <el-input v-model="form.detail"  ></el-input>
            </el-form-item>

            <el-form-item label="上传头像" :label-width="formLabelWidth">
              <el-upload
                  class="upload-demo"
                  action=""
                  :auto-upload="false"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  multiple
                  :limit="1"
                  :show-file-list="true"
                  list-type="picture-card"
                  :file-list="fileList">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="类型" :label-width="formLabelWidth">
              <el-select v-model="form.typeId" >
                <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学分" :label-width="formLabelWidth">
              <el-input-number v-model="form.score" @change="handleChange1" :min="1" :max="10" label="数量"></el-input-number>
            </el-form-item>

            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input v-model="form.address"  ></el-input>
            </el-form-item>

            <el-form-item label="最大报名人数" :label-width="formLabelWidth">
              <el-input-number v-model="form.upMaxNum" @change="handleChange1" :min="1" :max="100" label="数量"></el-input-number>
            </el-form-item>
            <el-form-item label="主办部落" :label-width="formLabelWidth">
              <el-select v-model="form.tribeId" >
                <el-option
                    v-for="item in tribeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="人员范围" :label-width="formLabelWidth">
              <el-select v-model="form.apply" >
                <el-option
                    v-for="item in applyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item  label="报名开始时间" :label-width="formLabelWidth">

            <el-date-picker
                v-model="form.upBeginTime"
                type="datetime"
                placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="报名结束时间" :label-width="formLabelWidth">
            <el-date-picker
                v-model="form.upEndTime"
                type="datetime"
                placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>

            <el-form-item label="活动开始时间" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="form.ingBeginTime"
                  type="datetime"
                  placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>

            <el-form-item label="活动结束时间" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="form.ingEndTime"
                  type="datetime"
                  placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>




          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="reset">取 消</el-button>
            <el-button type="primary" @click="saveAdd">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CrowdView",
  data(){
    return{
      applyList:[
        {
          id:1,
          name:'全部人员'
        } ,
        {
          id:2,
          name:'部落人员'
        }
      ],
      page:{},
      pageSize:5,
      form:{
        // crowdList:[]
      },
      dialogFormVisible1:false,
      dialogFormVisible:false,
      formLabelWidth:"100px",
      name:"",
      typeId:'',
      tribeId:'',
      tribeList:[],
      typeList:[],
      fileList:[],
      paths:[],

    }

  },
  methods:{

      handleChange1(value) {
        console.log(value);
      },


    handleChange(file){
      this.fileList.push(file)
      console.log('handleChange(file)',this.fileList)
    },

    handleRemove(file, fileList){
      this.fileList=fileList;
      console.log('handleRemove(file,fileList)',this.fileList);
    },
    limitNum(amount) {
      amount = amount
          .replace(/[^\d.]/g, "") //只能输入数字
          .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3") //只能输入两个小数
          .replace(/\.{2,}/g, "."); //出现多个点时只保留第一个
      // 第一位不让输小数点
      if (amount == ".") {
        amount = "";
      }
      // 如果第一位是0，第二位必须大于0或者小数点
      if (amount.substring(0, 1) == 0) {
        if (amount.substring(1, 2) > 0) {
          amount = amount.substring(1, 2);
        } else if (
            amount.substring(1, 2) === 0 ||
            amount.substring(1, 2) === "0"
        ) {
          amount = "0";
        }
      } else {
        // 如果第一位数字大于0（不等于0肯定就大于0），仅需考虑第二位是小数点的情况
        if (amount.indexOf(".") !== -1) {
          if (amount.substring(0, 1) > 0) {
            console.log("第一位大于0");
          } else {
            console.log("第一位等于0");
            if (amount.substring(2, 3) > 0) {
              console.log("小数点后第一位大于0");
            } else {
              console.log("小数点后第一位等于0");
              amount = "0.";
            }
          }
        } else {
          console.log("没有小数点，正常输入");
        }
      }
      this.form.price = amount;
    },
    add(){
      this.dialogFormVisible=true
    },
    clear(){
      this.name=''
      this.typeId=''
      this.tribeId=''
      this.paging(1)
    },
    del(id){
      this.$confirm('你确认删除？').then(()=>{
        this.$axios.post("/activity/del?id="+id).then(resp=>{
          if (resp.data.code==200){
            this.$message.success("删除成功")
            this.paging(1)
          }else{
            this.$message.error("删除失败")
            this.paging(1)
          }
        })
      })


    },

    update(row){
      this.dialogFormVisible1=true
      this.form=row
      this.fileList.push({"url":this.form.photopath})
    },
    paging(curPage){
      this.$axios.get("activity/list?curPage="+curPage+"&pageSize="+this.pageSize+"&name="+this.name+"&typeId="+this.typeId+"&tribeId="+this.tribeId).then(resp=>{
        this.page=resp.data
        this.page.list.forEach(item => {
          let date = new Date(item.upBeginTime);
          let formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
          item.upBeginTime = formattedDate;

          let date1 = new Date(item.upEndTime);
          let formattedDate1 = `${date1.getFullYear()}-${(date1.getMonth()+1).toString().padStart(2, '0')}-${date1.getDate().toString().padStart(2, '0')} ${date1.getHours().toString().padStart(2, '0')}:${date1.getMinutes().toString().padStart(2, '0')}:${date1.getSeconds().toString().padStart(2, '0')}`;
          item.upEndTime = formattedDate1;

          let date2 = new Date(item.ingBeginTime);
          let formattedDate2 = `${date2.getFullYear()}-${(date2.getMonth()+1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')} ${date2.getHours().toString().padStart(2, '0')}:${date2.getMinutes().toString().padStart(2, '0')}:${date2.getSeconds().toString().padStart(2, '0')}`;
          item.ingBeginTime = formattedDate2;

          let date3 = new Date(item.ingEndTime);
          let formattedDate3 = `${date3.getFullYear()}-${(date3.getMonth()+1).toString().padStart(2, '0')}-${date3.getDate().toString().padStart(2, '0')} ${date3.getHours().toString().padStart(2, '0')}:${date3.getMinutes().toString().padStart(2, '0')}:${date3.getSeconds().toString().padStart(2, '0')}`;
          item.ingEndTime = formattedDate3;
        });
        console.log("this.page",this.page)

      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    reset(){
      this.dialogFormVisible=false;
      this.dialogFormVisible1=false;
      this.form={}
      this.fileList=[]

    },
    saveAdd(){
      console.log(this.form)
      var fd=new FormData()
      Object.keys(this.form).forEach(key=> {

          fd.append(key, this.form[key])

      })
      fd.append('status',0)

      //文件上传
      if (this.fileList.length > 0) {
        this.fileList.forEach(file=>{
          fd.append('photo',file.raw)
        })
      }else {
        this.$alert("请上传图片")
        return
      }
      this.$axios.post('/activity/add/',fd).then(resp=>{
        if (resp.data.code==200){
          this.$message.success(resp.data.message)
          this.reset()
          this.paging(1)
          location.reload();
        }else{
          this.$message.error(resp.data.message)
          this.reset()
          this.paging(1)
          location.reload();
        }


      })
    },
    refreshPage() {
      // 执行完操作后调用location.reload()方法刷新页面
      location.reload();
    },
    saveupdate(){
      console.log(this.form)
      var fd=new FormData()
      Object.keys(this.form).forEach(key=> {
            if (key !=='activityType' && key!=='tribe') {
              fd.append(key, this.form[key])
            }


      })

      //文件上传
      if (this.fileList.length > 0) {
        this.fileList.forEach(file=>{
          if(!file.raw && file.url.indexOf('blob')===-1){
            this.paths.push(file.url)
          }
          else {
            fd.append('photo',file.raw)
          }
        })
        fd.append("paths",this.paths)
      }else {
        this.$alert("请上传图片")
        return
      }
      this.$axios.post('/activity/update/',fd).then(resp=>{
        if (resp.data.code==200){
          this.$message.success(resp.data.message)
          this.reset()
          this.paging(1)
          location.reload();
        }else{
          this.$message.error(resp.data.message)
          this.reset()
          this.paging(1)
          location.reload();
        }


      })

    },

    getTribeList(){
      this.$axios.post("/tribe/list").then(resp=>{
        this.tribeList=resp.data.list
      })
    },

    getTypeList(){
      this.$axios.post("/activityType/list").then(resp=>{
        this.typeList=resp.data.list
      })
    }

  },
  created() {
    this.paging(1)
    this.getTribeList()
    this.getTypeList()

  }
}
</script>

<style scoped>

</style>
